<template>
  <div style="margin-left: 14%">
    <!-- 首页页 -->
    <el-breadcrumb separator="/">
      <!--面包屑 -->
      <el-breadcrumb-item>
        <i class="el-icon-s-home" style="margin-right: 15px; font-size: 16px"></i>首页
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="14"><div class="grid-content bg-purple">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div style="border-left: 9px solid #6C59DD; float: left; padding-left: 15px; color: #6C59DD; height: 32px; line-height: 32px">
            <span>登录次数</span>
            </div>
            <!-- <el-button :class="!flag? 'btnBgc' : ''" round style="float: right; margin-left: 15px; padding: 7px 20px">近30天</el-button>
            <el-button :class="flag? 'btnBgc' : ''" round style="float: right; padding: 7px 20px">近7天</el-button> -->
            <button :class="!flag? 'btnBgc' : ''" @click="day30" style="cursor:pointer; border: 1px solid #ccc; border-radius: 15px; width: 80px; height: 30px; margin-left: 15px; float: right;">近30天</button>
            <button :class="flag? 'btnBgc' : ''" @click="day7" style="cursor:pointer; border: 1px solid #ccc; border-radius: 15px; width: 80px; height: 30px; float: right;">近7天</button>
          </div>
          <ve-histogram height="340px" :data="chartData" :extend="chartSettings"></ve-histogram>
        </el-card>
      </div></el-col>
      <el-col :span="10"><div class="grid-content bg-purple-light">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div style="border-left: 9px solid #6C59DD; float: left; padding-left: 15px; color: #6C59DD;  height: 32px; line-height: 32px">
            <span>待检定设备</span>
            </div>
            <el-button @click="toRouter" class="global_edit" style="float: right; padding: 3px 0" type="text">查看详情</el-button>
          </div>
          <el-carousel indicator-position="none" arrow="never" height="340px">
            <el-carousel-item v-for="(item,index) in tableData" :key="index">
              <el-table stripe :data="item" style="width: 100%">
                  <el-table-column prop="instr_name" label="设备名称" align="center" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="model" label="设备型号" align="center">
                  </el-table-column>
                  <el-table-column prop="instr_number" label="设备编号" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="有效日期" align="center">
                    <template slot-scope="scope">
                      <span v-if="(new Date(scope.row.date) - new Date()) / (1000 * 60 * 60 * 24) < 0" style="color: red">{{scope.row.date}}</span>
                      <span v-else>{{scope.row.date}}</span>
                    </template>
                  </el-table-column>
                </el-table>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </div></el-col>
    </el-row>
    <div class="info">
        <el-card :body-style="{ padding: '0px' }" class="foot-card">
          <div slot="header" class="clearfix">
            <div style="border-left: 9px solid #6C59DD; float: left; padding-left: 15px; color: #6C59DD;  height: 32px; line-height: 32px">
            <span>气候变化趋势</span>
            </div>
            <el-date-picker
              value-format="yyyy-MM-dd HH-mm-ss"
              @change="iptChange"
              style="float: right;"
              v-model="value"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div class="menu_btn">
            <div style="cursor:pointer;" @click="btnNo1" :class="btnNo===1?'borderColor':''">大气压</div>
            <div style="cursor:pointer;" @click="btnNo2" :class="btnNo===2?'borderColor':''">温度</div>
            <div style="cursor:pointer;" @click="btnNo3" :class="btnNo===3?'borderColor':''">相对湿度</div>
          </div>
          <ve-line height="360px" :data="chartDatas" :extend="chartSetting"></ve-line>
        </el-card>
    </div> 
  </div>
</template>

<script>
import Bus from '../../public/eventBus'
export default {
  data() {
    // this.chartSettings = {
    //   color: ['red']
    // }
    return {
      pickerOptions: {
        // disabledDate(time) {   //time跟页面没有关系   相当于日期数组
        //     return time.getTime() > Date.now() - 8.64e6  //设置选择今天以及今天之前的日期
        //   },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      value: '',
      flag: true,
      btnNo: 1,
      day: '7',
      chartSettings: {
        series:{
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: {
              type: 'linear',
              // x: 0,//X轴起始坐标
              y: 0,//Y轴起始坐标
              // x2: 1,//X轴终点坐标
              y2: 1,//Y轴终点坐标
              colorStops: [{
              offset: 0, color: '#F5F4FA' // 0% 处的颜色
              }, {
              offset: 1, color: '#F6F5FB' // 100% 处的颜色
              }],
              globalCoord: false, // 缺省为 false
              },
              barBorderRadius: 20 // 柱状图阴影圆角边框
              },
              itemStyle: {  // 柱状图柱子圆角边框
                barBorderRadius: 20    
              },
              barWidth: 12
              },
              
        color: {
              type: 'linear',
              // x: 0,//X轴起始坐标
              y: 0,//Y轴起始坐标
              // x2: 1,//X轴终点坐标
              y2: 1,//Y轴终点坐标
              colorStops: [{
              offset: 0, color: '#898CF9' // 0% 处的颜色
              }, {
              offset: 1, color: '#AF96F9' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
              },
        legend:{
              show:false,
              
            },
        yAxis:{
          axisLine:{
            show:false,
          },
          splitLine: {
              show: false
              } 
        },
        xAxis:{
          axisLine:{
            show:true,
          },
          axisTick:{
                show:true,
                alignWithLabel: true
          },
          // 垂直显示
          // axisLabel: {
          //   interval:0,
          //   formatter:function(value)
          //   {
          //     return value.split("").join("\n");
          //   }
          // }
          // 倾斜显示
          axisLabel: {
            margin: 15,//距离
            interval: 0,
            rotate: 30,//倾斜度
            // fontWeight: 'normal',
            color: '#000',
            },
            triggerEvent: true,
            splitLine: {
              show: false
              } 
          },
      },
      chartSetting: {
        legend:{
              show:false,
            },
        xAxis:{
          // boundaryGap: false,
          axisLine:{
            show:true, // 显示x轴
          },
          axisTick:{
                show:true, // x轴每项的小竖线
                alignWithLabel: true // x轴中间显示还是小竖线显示
          },
          // 垂直显示
          // axisLabel: {
          //   interval:0,
          //   formatter:function(value)
          //   {
          //     return value.split("").join("\n");
          //   }
          // },
          // 倾斜显示
          axisLabel: {
            margin: 15,//距离
            interval: 0,
            rotate: 30,//倾斜度
            },
            triggerEvent: true
          }
        },
      chartDatas: {},
      chartData: {},
      tableData: [],
      }
    },
    methods: {
      iptChange() {
        if(this.value){
        if(this.btnNo === 1){
          // 获取某些天的大气压
          this.getAllparam(this.btnNo-1,this.value[0],this.value[1])
        }else if(this.btnNo === 2) {
          // 获取某些天的温度
          this.getAllparam(this.btnNo-1,this.value[0],this.value[1])
        }else{
          // 获取某些天的相对湿度
          this.getAllparam(this.btnNo-1,this.value[0],this.value[1])
        }
      }else{
        if(this.btnNo === 1){
          this.getAllparam(this.btnNo-1)
        }else if(this.btnNo === 2) {
          this.getAllparam(this.btnNo-1)
        }else{
          this.getAllparam(this.btnNo-1)
        }
      }
      },
      toRouter() {
        Bus.$emit('setActive','16')
        this.$router.push({
          path: '/equipmentManagement',
          query: {sign: 'test'}
        })
      },
      day30() {
        if(!this.flag) {
          return
        }
        this.flag = false
        this.day = 30
        this.getDay()
      },
      day7() {
        if(this.flag) {
          return
        }
        this.flag = true
        this.day = 7
        this.getDay()
      },
      btnNo1() {
        if(this.btnNo === 1){
          return
        }
        this.btnNo = 1
        // 获取大气压数据
        if(this.value) {
          if(this.value.length !== 0) {
            this.getAllparam(this.btnNo-1,this.value[0],this.value[1])
          }
        }else{
          this.getAllparam(this.btnNo-1)
        }
      },
      btnNo2() {
        if(this.btnNo === 2){
          return
        }
        this.btnNo = 2
        // 获取温度
        if(this.value) {
          if(this.value.length !== 0) {
            this.getAllparam(this.btnNo-1,this.value[0],this.value[1])
          }
        }else{
          this.getAllparam(this.btnNo-1)
        }
      },
      btnNo3() {
        if(this.btnNo === 3){
          return
        }
        this.btnNo = 3
        // 获取相对湿度
        if(this.value) {
          if(this.value.length !== 0) {
            this.getAllparam(this.btnNo-1,this.value[0],this.value[1])
          }
        }else{
          this.getAllparam(this.btnNo-1)
        }
      },
      async getDay() {
        const { result } = await this.$http.get(`/indexData/getLoginFrequency?type=${this.day}`)
        this.chartData = result
      },
      async getEquipOutOfDate() {
        const { result } = await this.$http.get('/indexData/getEquipOutOfDate')
        this.tableData = result
      },
      async getAllparam (index,startTime,endTime) {
        if(startTime){
          const { result } = await this.$http.get(`/indexData/getAllparam?startTime=${startTime}&endTime=${endTime}`)
          this.chartDatas = result[index]
        }else{
          const { result } = await this.$http.get('/indexData/getAllparam')
          this.chartDatas = result[index]
        }
        
      }
    },
    created() {
        this.getDay() // 获取用户登录频率
        this.getEquipOutOfDate()
        this.getAllparam(0)
    },
    mounted() {
      Bus.$emit('setHeight')
      Bus.$emit('getHeight')
    }
  }
</script>

<style lang="scss" scoped>
@import './HomePage.scss'
</style>